<template>
  <section class="message">
    <div class="btn btn-success" @click="clickBack()">返回</div>
    <div class="item container">
      <div class="page-header">
        {{tableDetails.name}}
        <div class="pull-right">
          <router-link tag="button" class="btn btn-primary" :to="'/edit/' + tableDetails.id">编辑</router-link>
          <button class="btn btn-danger" @click="deleteTable(tableDetails.id)">删除</button>
        </div>
      </div>
      <ul class="list-group">
        <li class="list-group-item">
          <span class="glyphicon glyphicon-earphone">&nbsp;{{tableDetails.phone}}</span>
        </li>
        <li class="list-group-item">
          <span class="glyphicon glyphicon-envelope">&nbsp;{{tableDetails.email}}</span>
        </li>
      </ul>
      <ul class="list-group">
        <li class="list-group-item">
          <span class="glyphicon glyphicon-leaf">&nbsp;{{tableDetails.education}}</span>
        </li>
        <li class="list-group-item">
          <span class="glyphicon glyphicon-fire">&nbsp;{{tableDetails.graduationschool}}</span>
        </li>
        <li class="list-group-item">
          <span class="glyphicon glyphicon-magnet">&nbsp;{{tableDetails.profession}}</span>
        </li>
      </ul>
    </div>
  </section>
</template>

<script>
export default {
  name: 'Message',
  data () {
    return {
      tableDetails: {}
    }
  },
  created () {
    this.getUsers(this.$route.params.id)
  },
  methods: {
    getUsers (id) {
      this.axios.get('/users/' + id)
        .then((res) => {
          console.log(res)
          let data = res.data
          this.tableDetails = data
        })
    },
    clickBack () {
      this.$router.go(-1)
    },
    deleteTable (id) { // 删除当前
      this.axios.delete('/users/' + id)
        .then(() => {
          this.$router.push({ path: '/home', query: { alert: '用户信息删除成功！' } })
        })
    }
  }
}
</script>

<style lang="stylus" scoped>
  .btn-success
    margin 30px
  .page-header
     margin-top 20px
    .pull-right
      .btn
        font-size 16px
      .btn-primary
        margin-right 30px
  .list-group
    .list-group-item
      font-size 30px
</style>
